<template>
    <el-dialog title="添加合同" :visible.sync="isShow" width="550px" :close-on-click-modal="false" class="about_dialog"
               @close="cancel" v-dialogDrag :lock-scroll="false">
        <div class="el-dialog-div">
        <el-form size="small" label-width="100px" :model="form" ref="form" :rules="rules">
            <el-form-item label="合同编号" prop="code">
                <el-input placeholder="请输入" v-model="form.code" >
                </el-input>
            </el-form-item>
            <el-form-item label="合同名称" prop="name">
                <el-input placeholder="请输入" v-model="form.name" style=";"></el-input>
                <el-popover placement="right" width="150px" trigger="hover">
                    <div>
                        <p>必须为英文字符</p>
                    </div>
                    <i slot="reference" class="el-icon-warning-outline"></i>
                </el-popover>
            </el-form-item>
            <el-form-item label="合同内容" prop="content">
                <el-input type="textarea" placeholder="请输入" v-model="form.content" style="width: 90%;">
                </el-input>
            </el-form-item>
            <el-form-item label="合同日期" >
                <el-date-picker v-model="time" type="daterange" range-separator="至" start-placeholder="开始日期" 
                                end-placeholder="结束日期" :unlink-panels='true' value-format="yyyy-MM-dd HH:mm:ss" style="width: 90%;">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="负责人" prop="person">
                <el-input placeholder="请输入" v-model="form.person" style=";"></el-input>
            </el-form-item>
            <el-form-item label="金额" prop="price">
                <el-input placeholder="请输入" v-model="form.price" style=";"></el-input>
            </el-form-item>
        </el-form>
        </div>

        <span slot="footer" class="dialog-footer">
            <el-button class="font12" @click="cancel" size="small">取 消</el-button>
            <el-button type="primary" @click="confirm" size="small">确 定
            </el-button>
        </span>
    </el-dialog>
   
</template>
<script>
// import PartSelect from './PartSelect.vue';
// import { createOffer } from '@/service/zstack/calcSpec';

export default {
    components: { 
    //   PartSelect 
    },
    data() {
        return {
            isShow: false,
            time: '',
            form: {
                code: '',
                name: '',
                content: '',
                beginTime: '',
                endTime: '',
                person: '',
                price: '',
            },
            rules: {
                code: [{ required: true, message: '请输入合同ID', trigger: 'blur' }],
                name: [{ required: true, message: '请输入合同名称', trigger: 'blur' }],
                person: [{ required: true, message: '请输入负责人', trigger: 'blur' }],
            }
        };
    },
    computed: {},
    watch: {
        isShow(val) {
            if (!val) {
                this.$refs['form'].resetFields();
            }
        },
        time() {
            this.form.beginTime = this.time[0]
            this.form.endTime = this.time[1]
        }
    },
    methods: {
        show() {
            this.form = {
                code: '',
                name: '',
                content: '',
                beginTime: '',
                endTime: '',
                person: '',
                price: '',
            };
            this.isShow = true;
        },
        hide() {
            this.isShow = false;
            this.time = ''
        },
        cancel() {
            this.hide();
        },
        confirm() {
            console.log('confirm',this.form);
            this.$refs.form.validate(async valid => {
					if (valid) {
						const { data: res } = await this.$http.post('contract', this.form);
                            console.log(res);
							if (res.code === 200) {
								//隐藏对话框
								this.isShow = false
								this.$emit("fetchData")
								this.$message.success("添加成功")
							} else {
								this.$message.error("操作失败")
							}
					}
				})
        }
    }
};
</script>
<style lang="less" scoped>
.el-dialog__body{
    padding: 0px;
    // overflow-y: auto;
}

.el-dialog-div{
    height: 50vh;
    overflow: auto;
    &::-webkit-scrollbar {
    width: 0px;
    height: 0px;
    // &::-webkit-scrollbar-thumb { 
    // border-radius: 5px;
    // background-color:  #d6d5d5;
    // }  
    // &::-webkit-scrollbar-track { 
    // box-shadow: inset 0 0 5px #fff;
    // background: rgb(209, 55, 55);
    // border-radius: 5px;
    // }
}
}

.el-input{
    width: 90%;
}

.el-icon-warning-outline{
    margin-left: 10px;
    font-size: 20px;
}

.part-select{
    width: 90%;
}
</style>>